<template>
  <div class="test-api-container">
    <h1>API测试页面</h1>
    <div class="test-section">
      <h2>API对象测试</h2>
      <div>
        <p>API对象：{{ apiExists ? '存在' : '不存在' }}</p>
        <p>psyQuestion模块：{{ psyQuestionExists ? '存在' : '不存在' }}</p>
        <p>psyQuestion.findPage：{{ findPageExists ? '存在(类型:'+findPageType+')' : '不存在' }}</p>
      </div>
      <el-button type="primary" @click="testApiCall">测试API调用</el-button>
      <el-button type="primary" @click="testWarningApi">测试预警通知API</el-button>
      <div v-if="apiResponse" class="response-container">
        <h3>API响应：</h3>
        <pre>{{ apiResponse }}</pre>
      </div>
    </div>
    <warning-notice ref="warningNotice"></warning-notice>
  </div>
</template>

<script>
import api from '@/http/api'
import WarningNotice from '@/components/WarningNotice'

export default {
  name: 'TestApi',
  components: {
    WarningNotice
  },
  data() {
    return {
      apiExists: false,
      psyQuestionExists: false,
      findPageExists: false,
      findPageType: '',
      apiResponse: null
    }
  },
  created() {
    // 检查全局API对象
    this.apiExists = !!this.$api
    console.log('$api:', this.$api)
    
    // 检查直接导入的API对象
    console.log('直接导入的api:', api)
    
    // 检查psyQuestion模块
    if (this.$api) {
      this.psyQuestionExists = !!this.$api.psyQuestion
      console.log('$api.psyQuestion:', this.$api.psyQuestion)
      
      if (this.$api.psyQuestion) {
        this.findPageExists = !!this.$api.psyQuestion.findPage
        this.findPageType = typeof this.$api.psyQuestion.findPage
        console.log('$api.psyQuestion.findPage:', this.$api.psyQuestion.findPage)
      }
    }
    
    // 检查直接导入的psyQuestion模块
    console.log('api.psyQuestion:', api.psyQuestion)
    if (api.psyQuestion) {
      console.log('api.psyQuestion.findPage:', api.psyQuestion.findPage)
      console.log('类型:', typeof api.psyQuestion.findPage)
    }
  },
  methods: {
    async testApiCall() {
      try {
        // 尝试直接使用导入的API
        const response = await api.psyQuestion.findPage({
          pageNum: 1,
          pageSize: 10
        })
        this.apiResponse = JSON.stringify(response, null, 2)
        console.log('API调用成功:', response)
      } catch (error) {
        this.apiResponse = '错误: ' + error.message
        console.error('API调用失败:', error)
      }
    },
    testWarningApi() {
      const username = this.$store.state.user.name;
      if (!username) {
        this.apiResponse = "用户未登录";
        return;
      }
      
      this.$api.warning.countUnread(username).then(res => {
        this.apiResponse = res;
        if (res.code === 200) {
          this.$message.success(`未读预警数量: ${res.data}`);
          this.$refs.warningNotice.getUnreadCount();
        }
      }).catch(error => {
        this.apiResponse = error;
        this.$message.error('获取未读预警数量失败');
      });
    }
  }
}
</script>

<style scoped>
.test-api-container {
  padding: 20px;
}
.test-section {
  margin-top: 20px;
  padding: 15px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}
.response-container {
  margin-top: 15px;
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
}
pre {
  white-space: pre-wrap;
  word-wrap: break-word;
}
</style> 